<template>
  <div>
    <PageHeader title="欢迎来到首页" description="这是一个基于Vue3和Vite的路由切换示例，采用了圣杯布局。" />

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
      <FeatureCard
          icon="fa-code"
          title="现代化框架"
          text="使用Vue3和Vite构建，提供极致的开发体验和性能优化。"
          color="blue"
      />
      <FeatureCard
          icon="fa-sitemap"
          title="路由系统"
          text="完整的路由切换功能，支持动画过渡和懒加载。"
          color="green"
      />
      <FeatureCard
          icon="fa-th-large"
          title="响应式布局"
          text="采用圣杯布局，在各种设备上都能提供出色的用户体验。"
          color="purple"
      />
    </div>

    <div class="mt-12 bg-gray-50 rounded-lg p-6 border border-gray-200">
      <h2 class="text-xl font-semibold mb-4">最近更新</h2>
      <div class="space-y-4">
        <UpdateItem
            date="2025-07-01"
            title="优化移动端体验"
            description="改进了侧边栏在移动设备上的显示效果，增加了平滑过渡动画。"
        />
        <UpdateItem
            date="2025-06-15"
            title="添加新的服务页面"
            description="扩展了服务页面，详细介绍了我们提供的各种前端开发服务。"
        />
        <UpdateItem
            date="2025-05-20"
            title="增强组件化结构"
            description="重构了代码结构，将各个功能模块拆分成独立的组件，提高了代码可维护性。"
        />
      </div>
    </div>
  </div>
</template>

<script>
import PageHeader from '../components/PageHeader.vue'
import FeatureCard from '../components/FeatureCard.vue'
import UpdateItem from '../components/UpdateItem.vue'

export default {
  components: {
    PageHeader,
    FeatureCard,
    UpdateItem
  }
}
</script>